<template>
  <boxContainer title="招聘动态一览" :loading="loading" :height="210">
    <template #header>
      <div class="left_boottom">
        <div class="left_boottom_item set-pd">
          <div class="flex w-full gap-10">
            <div class="w-80 flex-no-shrink">日期</div>
            <div class="flex-2">项目名称</div>
            <div class="flex-1">管理员</div>
            <div class="w-60 flex-no-shrink">入职人数</div>
            <div class="flex-2">入职企业</div>
          </div>
        </div>
      </div>
    </template>
    <template #default>
      <Vue3SeamlessScroll :list="state.visibleList" :limitScrollNum="5" :singleHeight="43" :singleWaitTime="2000"
        class="scroll" @count="getCount">
        <template v-if="state.visibleList?.length">
          <div class="left_boottom">
            <div class="left_boottom_item" :class="{ 'strip': i % 2 === 0 }" v-for="(item, i) in state.visibleList"
              :key="i">
              <div class="flex w-full gap-10">
                <div class="w-80 flex-no-shrink">{{ item.creationTime }}</div>
                <div class="flex-2 single-line">{{ filterProjectName(item.projectName) }}</div>
                <div class="flex-1">{{ filterName(item.projectLeader) }}</div>
                <div class="w-60 flex-no-shrink fc-lightgreen">{{ item.pwCount }}</div>
                <div class="flex-2 single-line">{{ filterCompanyName(item.serveCompanyName) }}</div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="left_boottom flex flex-jc-c flex-ai-c flex-column set-mg-t">
            <img src="../../../assets/img/bi/default-img.png" alt="">
            <div class="fs-16 fc-default mg-t-5">暂无数据</div>
          </div>
        </template>
      </Vue3SeamlessScroll>
    </template>
  </boxContainer>
</template>
<script setup lang="ts">
import { computed, ref, onMounted, reactive } from "vue";
import EmptyCom from "@/components/seamless-scroll/empty-com.vue"
import boxContainer from '@/components/box-container/index.vue';
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { chunk } from 'lodash';
import { joinJob } from '@/api/bi.ts';
import { filterName, filterCompanyName, filterProjectName } from '@/utils/util.ts';

const state = reactive<any>({
  list: [],
  pageList: [],
  visibleList: [],
  pageNum: 0,
  pageSize: 50,
  maxPageNum: 0,
  scroll: true,
  total: 0
});
let loading = ref(false)
const getData = () => {
  loading.value = true
  joinJob({}, {
    loading: true
  }).then((res: any) => {
    loading.value = false
    state.pageNum = 0
    state.list = res || []
    state.maxPageNum = Math.ceil(state.list.length / state.pageSize)
    state.pageList = chunk(state.list, state.pageSize)
    state.visibleList = state.pageList[state.pageNum]
    console.log(1234, state.visibleList);
  })
};
const getCount = (count: any) => {
  state.visibleList = state.pageList[count % state.maxPageNum]
  if (state.pageList?.length > 1 && state.visibleList?.length < state.pageSize) {
    const temp = state.pageList[0].slice(0, state.pageSize - state.visibleList?.length)
    state.visibleList = [...state.visibleList, ...temp]
  }
}
defineExpose({
  getData
})
onMounted(() => {
  getData();
});
</script>
<style scoped lang="stylus">
.left_boottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
   color: #fff;
}
.overflow-y-auto {
  overflow-y: auto;
}

.left_boottom {
  width: 100%;
  height: 100%;
  color: #fff;
  .left_boottom_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    font-size: 14px;
    // margin: 10px 0;
  }
}
.set-pd {
  padding: 0 8px;
}
.strip {
    background-color: rgba(255, 255, 255, 0.03)
}
.setbg {
  background: #071B43;
}
.fc-lightgreen {
  color: #19EBFF;
}

.single-line {
  width 80px
  overflow hidden
  text-overflow ellipsis
  white-space nowrap
}
.gap {
  gap 10px
}
.w-80 {
  width 80px  
}
.w-60 {
  width 60px  
}
.fc-default {
  color rgba(255, 255, 255, 0.2)
}
.set-mg-t {
  margin-top 50px
}
</style>
